import React, { PureComponent } from 'react';
import {
    StyleSheet,
    View,
    Text,
    FlatList,
    RefreshControl,
    ActivityIndicator
} from 'react-native';
import { fontColorLightGray, px2dp } from '../common/styles/index';
import EmptyPage from '../components/EmptyPage';
/**
 * @author kanglang
 * @description 列表组件
 * @createDate 2020/6/29
 * 
 * 
 * sources   页面渲染数据源
 * renderItem 页面单条数据渲染的Dom, 支持 React element
 * loadColor 刷新指示器颜色设置，至少为加一种颜色 ,如：['red','blue'] 非必须
 * onDropdownRefresh 此为下拉刷新方法回调 ,如果不传则没有下拉刷新
 * onPullUpMore 此为上拉加载更多，如果不传则没有上拉加载更多
 * onEndSize 上拉距离底部距离调取距离 ,默认为0.1
 * loadTitle 刷新指示器 title 文字提示
 * tintColor 刷新指示器 title 文字颜色 如：['red','blue'] 非必须
 * singleKey 唯一的key
 * showVerticalScroll 垂直滚动条 隐藏/显示  默认true 显示
 * showHorizontalScroll 水平滚动条 隐藏/显示  默认true 显示
 * customEmptyView 自定义空页面 
 */


export default class XmList extends PureComponent {
    constructor(props) {
        super(props);
    }

    renderFooter() {
        const { isLoading, showFoot, isHistory, styleFoot } = this.props;
        if (showFoot == 2) {
            return (
                <View style={[styles.more, styleFoot]}>
                    <ActivityIndicator />
                    <Text>正在加载更多数据..</Text>
                </View>
            )
        } else if (!isLoading && showFoot == 1 && !isHistory) {
            return (
                <View style={styles.more}>
                    <Text style={styles.noMore}>
                        没有更多数据了
                    </Text>
                </View>
            )
        } else if (!isLoading && showFoot == 1 && isHistory) {
            return (
                <View style={styles.more}>
                    <Text style={{ color: '#999796', fontSize: px2dp(14) * 2, marginTop: px2dp(12) * 2 }}>
                        仅显示30天内的发货历史
                    </Text>
                </View>
            )
        }
        else if (showFoot == 0) {
            return (
                <View style={styles.more}>
                    <Text style={styles.noMore}>

                    </Text>
                </View>
            )
        }

    }

    getData() {
        this.props.onDropdownRefresh && this.props.onDropdownRefresh();
    }
    LoadMore() {
        this.props.onPullUpMore && this.props.onPullUpMore();
    }
    myScroll = (event) => {
        this.props.onScroll && this.props.onScroll(event);
    }
    render() {
        const { isLoading, renderItem, sources, singleKey,
            onEndSize, loadColor, loadTitle, tintColor, numColumns,
            ItemSeparatorComponent, style, showFoot, ListHeaderComponent,
            noText, noTextSecond, showVerticalScroll = true, showHorizontalScroll = true, customEmptyView } = this.props;
        const customView = () => {
            if (customEmptyView) {
                return customEmptyView;
            } else {
                return showFoot == 0 && <EmptyPage noText={noText} noTextSecond={noTextSecond} />
            }
        }
        return (

            <FlatList
                style={style}
                data={sources ? sources : []}
                renderItem={renderItem}
                numColumns={numColumns}
                ListHeaderComponent={ListHeaderComponent}
                ItemSeparatorComponent={ItemSeparatorComponent}
                showsVerticalScrollIndicator={showVerticalScroll}
                showsHorizontalScrollIndicator={showHorizontalScroll}
                refreshControl={
                    this.props.onDropdownRefresh &&
                    <RefreshControl
                        title={loadTitle ? loadTitle : '正在刷新'}
                        tintColor={tintColor && tintColor.length > 0 ? tintColor : ['#FFC55D', '#BB934B']
                        }
                        colors={loadColor && loadColor.length > 0 ? loadColor : ['#FFC55D', '#BB934B']
                        }
                        refreshing={isLoading}
                        onRefresh={() => { this.getData() }}
                    />
                }
                onEndReached={() => { this.props.onPullUpMore && this.LoadMore() }}
                onEndReachedThreshold={onEndSize ? onEndSize : 0.1}
                ListFooterComponent={this.props.onPullUpMore ? this.renderFooter() : null}
                keyExtractor={singleKey}
                ListEmptyComponent={customView}
                onScroll={this.myScroll}
            />

        );
    }
}

const styles = StyleSheet.create({
    more: {
        height: 130,
        alignItems: 'center',
        justifyContent: 'flex-start'
    },
    noMore: {
        color: fontColorLightGray,
        fontSize: 14,
        marginTop: 5,
        marginBottom: 5
    }

});